<template>
  <div class="category">
      <!-- <h2>分类</h2>
      <h5>目前共计48个标签</h5> -->
      <el-row :gutter="20">
        <el-col :span="3" class="col-left">
          <router-link @click.native="change(0)" :to="{ path: '/category'}" tag='li'>全部</router-link>
          <!-- <router-link @click.native="change(item.id)" :class="{last:index == (category.length - 1)}" v-for="(item, index) in category" :key='index' :to="{ path: '/category', query: {id: item.id}}" tag='li'>{{item.name}}</router-link> -->
          <router-link @click.native="change(1)" :to="{ path: '/category/aa'}" tag='li'>Nginx</router-link>
          <router-link @click.native="change(2)" :to="{ path: '/category/bb'}" tag='li'>MySql</router-link>
          <router-link @click.native="change(3)" :to="{ path: '/category/cc'}" tag='li'>Python</router-link>
          <router-link @click.native="change(4)" :to="{ path: '/category/dd'}" tag='li'>Linux</router-link>
          <router-link @click.native="change(5)" :to="{ path: '/category/ee'}" tag='li'>PHP</router-link>
          <router-link @click.native="change(6)" :to="{ path: '/category/ff'}" tag='li'>技术杂谈</router-link>
        </el-col>
        <div class="list1">
          <div class="list12">
          <img  class="image" style="" src="../../static/2.jpeg"/>
          </div>
          <div class="list13">
          <a class="pp1" @click="tt">城市天气爬去并绘制图表</a><br/>
<p class="pp2"><i class="el-icon-user-solid"></i>作者Mr.Yong <i class="el-icon-time"></i>发表于2020-06-07 11:30:00 <i class="el-icon-s-unfold"></i>分类Mysql | 阅读量31 | 评论数10</p><br/>
<p class="pp3">以爬去深圳城市七天天气为例，`BeautifulSoup`爬去天气数据，`echart`绘制最高气温与最低气温折线图。</p>
<!-- <p class="pp4">果显示 | Field |Type | Null | Key | Default | Extra | | :---- | ------------ | ---- | ---- | ------- | -------------- | | id | int(11) | NO | P</p> -->
<el-tag class="pp5" type="success">数据库</el-tag>
<el-tag class="pp5" type="success">Redis</el-tag>
          </div>
</div>

<div class="list1">
          <div class="list12">
          <img  class="image" style="" src="../../static/photo2.jpeg"/>
          </div>
          <div class="list13">
          <a class="pp1" @click="tt">超过经理收入的员工</a><br/>
<p class="pp2"><i class="el-icon-user-solid"></i>作者Mr.Yong <i class="el-icon-time"></i>发表于2020-03-20 11:30:00 <i class="el-icon-s-unfold"></i>分类Mysql | 阅读量23 | 评论数0</p><br/>
<p class="pp3">###### 题目</p>
<!-- <p class="pp4">果显示 | Field |Type | Null | Key | Default | Extra | | :---- | ------------ | ---- | ---- | ------- | -------------- | | id | int(11) | NO | P</p> -->
<el-tag class="pp5" type="success">leetcode</el-tag>
<el-tag class="pp5" type="success">题解</el-tag>
          </div>
</div>
<div class="list1">
          <div class="list12">
          <img  class="image" style="" src="../../static/photo1.jpg"/>
          </div>
          <div class="list13">
          <a class="pp1" @click="tt">Python基础整理元组基本操作</a><br/>
<p class="pp2"><i class="el-icon-user-solid"></i>作者Mr.Yong <i class="el-icon-time"></i>发表于2020-03-20 11:30:00 <i class="el-icon-s-unfold"></i>分类Nginx | 阅读量23 | 评论数0</p><br/>
<p class="pp3">好久没有整理python的基础知识了，这次整理一下python的数据类型元组的基本操作方法。</p>
<!-- <p class="pp4">果显示 | Field |Type | Null | Key | Default | Extra | | :---- | ------------ | ---- | ---- | ------- | -------------- | | id | int(11) | NO | P</p> -->
<el-tag class="pp5" type="success">Python</el-tag>

          </div>
</div>
    <!-- <div class="moviesContainer" v-for="(item, index) in aa" v-bind:key="index">
            <div class="movies_info">
                <p class="movies_name">{{item.labelId}}</p>
                <p class="movies_name">{{item.labelName}}</p>
                <p class="movies_name">{{item.createTime}}</p>
                <p class="movies_name">{{item.updateTime}}</p>
      </div>
    </div> -->
      </el-row>
  </div>
</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import {getCates} from '@/api/cate';
import axios from 'axios'
let _this = this;
export default {
  name: 'Category',
  props:{
    id:{defult:0}
  },
  components:{
    ArticleScrollPage
  },
  data () {
    return {
      // name: '',
      // goods: [
      //   {name: '女装' ,link: 'goods'},
      //   {name: '男装' ,link: 'goods'}
      // ],
      moviesArr: [],
      aa: [],
      category:[],
      params: {
        query: {
          cate_id: 0
        }
      },
    }
  }, 
  mounted(){
    _this = this;
    _this.params.query.cate_id = _this.$route.query.id ? _this.$route.query.id : 0;
    _this.getCategory();
    // 新加的
    // _this.stri= _this.$route.query.type
    // _this.$router.push({ path: 'Nginx', query: { plan: Date.now().toString()}})
  },
  // 这个是新加的
  beforeMount () {
    axios.get('http://31f747b701.qicp.vip/blog/article-blog/list/1/10').then(response => {
      const moviesArr = response.data.data
      console.log(moviesArr)
      this.moviesArr = moviesArr
    })
      .catch((error) => {
        console.log(error)
      }),
      axios.get('http://31f747b701.qicp.vip/blog/label-blog/list').then(response => {
      const aa = response.data.data
      console.log(aa)
      this.aa = aa
    })
      .catch((error) => {
        console.log(error)
      })
  },
  watch: {
    '$route' (to, from) {
      console.log(this.$route.query)
    }
},
  methods:{
    getData () {
      axios.post('http://31f747b701.qicp.vip/blog/label-blog/insert').then(response => {
        console.log(response.data)
      }, response => {
        console.log('error')
      })
    },
     getData1 () {
      axios.get('http://31f747b701.qicp.vip/blog/article-blog/list/1/2').then(response => {
        console.log(response.data)
      }, response => {
        console.log('error')
      })
    },
    getData2 () {
      axios.get('http://31f747b701.qicp.vip/blog/label-blog/list').then(response => {
        console.log(response.data)
      }, response => {
        console.log('error')
      })
    },
    getCategory(){
      getCates().then(res => {
        _this.category = res.data
      })
    },
    change(id){
      _this.params.query.cate_id  = id;
    },
    tt(){
      this.$router.push('/view/1')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.category
  width 65%
  text-align center
  h2
    line-height 100px
    color #555
    font-weight 500
  h5
    font-weight 500
    color #555
  .el-row
    width 100%
    .col-right
      margin-left 20%
      min-height 600px
    .col-left
      padding  20px 0
      margin 20px 0
      background-color #ffffff
      position fixed
      li
        list-style none
        padding 5px 20px
        text-align center 
        cursor pointer
        display block
        color #555
        line-height 2
      .router-link-exact-active
        color #409eff  
</style>
<style>
.list1{
  width: 1100px;
  height:200px;
  border:3px solid whitesmoke;
  margin-left: 300px;
  margin-top: 30px;
  /* white-space: nowrap;
  overflow: hidden; */
}
.pp1{
  font-size: 25px;
  font-weight: bold;
  /* margin-left: -605px; */
  text-align: center;
  margin-top: 10px;
}
.pp2{
   margin-left: -310px;
   margin-top: 10px;
}
.pp3{margin-left: 10px; text-align: left;}
.pp4{margin-left: 10px; margin-top: 10px;text-align: left;}
.pp5{margin-top: 10px;padding-left: -100px;}
a:hover{
  text-decoration: underline;
}
.list12{
  float: left;
  width: 200px;
  height: 200px;
  /* border: 1px solid red; */
}
.list13{
  float: left;
  width: 880px;
  height: 200px;
  text-align: center;
  /* border: 1px solid yellow; */
}
.moviesContainer{
        width: 1100px;
        display: flex;
        padding:10rpx;
        height:200px;
        border:3px solid whitesmoke;
        margin-left: 300px;
        margin-top: 30px;
    }
    .movies_name{
        font-size: 32rpx;
        color: #333;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .image{
      margin-top: 5%;
      width:90%;
      height:90%;
      border-radius: 100px;
    }
</style>
